import { InputHTMLAttributes } from 'react';
import RadioContext from 'src/context/RadioContext';
import style from './Radio.module.scss';

/**
 * usage note:
 * this component should be only used as a child of RadioGroup.
 */

type Props = InputHTMLAttributes<HTMLInputElement> & {
  value: string;
  label?: string;
};

const Radio = ({ value, label, ...props }: Props) => (
  <RadioContext.Consumer>
    {({ name, onChange, ref }) => (
      <div className={style.self}>
        <input
          id={value}
          value={value}
          name={name}
          onChange={onChange}
          ref={ref}
          {...props}
          type="radio"
        />
        {label && <label htmlFor={value}>{label}</label>}
      </div>
    )}
  </RadioContext.Consumer>
);

export default Radio;
